<template>
  <div class="row">
    <div class="col-sm-12 col-md-12 col-lg-12">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="row header">
            <div class="col-sm-4 col-md-4 col-lg-4">
              <strong>房产中介-租友点评管理</strong>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4">
              <form @submit.prevent="searchKey">
                <div class="input-group">
                  <input type="text" v-model="keyword" class="form-control input-sm" placeholder="输入中介关键字...">
                  <span class="input-group-btn">
                    <button class="btn btn-default btn-sm" type="submit">
                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                    </button>
                  </span>
                </div><!-- /input-group -->
              </form>
            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 text_align_right">
              <router-link to="/edit">
                <button type="button" class="btn btn-primary btn-sm">添加中介名录
                  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                </button>
              </router-link>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <div class="spinner" v-if="loading">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
          </div>
          <ul class="list-group" v-if="items.length > 0">
            <li class="list-group-item" :key=index v-for="(item, index) in items">
              <div class="row">
                <div class="col-sm-6 col-md-6 col-lg-6"><strong>{{item.name}}</strong> - {{item.intro?item.intro:'无简介'}}</div>
                <div class="col-sm-6 col-md-6 col-lg-6 text_align_right">
                  <router-link :to="{path:'evaluate', query:{id:item.id}}">
                    <span class="label label-success">赞 ( {{item.zan}} )</span>
                    <span class="label label-warning">踩 ( {{item.cai}} )</span>
                    <span class="label label-default">黑 ( {{item.hei}} )</span>
                    <span class="label label-info">评论 ( {{item.ping}} )</span>
                  </router-link>
                </div>
              </div>
            </li>
          </ul>
          <p class="text-center" v-if="items.length == 0 && loading==false">没有符合条件的数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style src="@/assets/loading.css" scoped></style>

<style scoped>
a,a:hover {text-decoration:none;}
strong {font-size:16px;}
.label {
  margin-right:3px;
}
/*
.list-group-item {
  display:flex;
  flex-direction:row;
  justify-content:space-between;
}
*/
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) {
  .text_align_right {text-align:right;}
}
@media (max-width: 768px) {
  .header > div {
    margin:6px 0;
  }
}
</style>
<script>

export default {
  name: 'List',
  components: {
  },
  data: function () {
    return {
      items: [],
      keyword: '',
      loading: true
    }
  },
  created: function () {
    this.axios
      .post('/queryrows')
      .then((res) => {
        this.loading = false
        let data = res.data
        if (res.data.RetCode !== 2000000) {
          alert('系统异常，获取失败')
          return
        }
        this.items = data.Data
      })
      .catch((err) => console.log(err))
  },
  methods: {
    searchKey () {
      this.items = []
      this.loading = true
      this.axios.post('/queryrows', this.qs.stringify({ keyword: this.keyword }))
        .then((res) => {
          this.loading = false
          if (res.data.RetCode !== 2000000) {
            alert('系统异常，获取失败')
            return
          }
          this.items = res.data.Data
        })
        .catch((err) => console.log(err))
    }
  }
}
</script>
